<template>
  <div>
    <div class="nationalMap" ref="nationalMap_id"></div>
    <div v-show="CurrentLevel == 2" class="nationalMap_return" @click="withdraw()">
      <img src="../../../static/image/left_jt.png" alt class="nationalMap_return_imgs" />
      <p>返回全国</p>
    </div>
  </div>
</template>

<script>
import { commonRequest } from "../../api/api.js";
export default {
  name: "nationalMap",
  data() {
    return {
      CurrentLevel: 1,
      Lzqgdtsj: [],
      currentProvincial: "",

      allRegions: [] // 所有地区
    };
  },
  mounted() {
    this.introduceJs("china");
  },
  methods: {
    // 获取数据
    getData(value) {
      // 获取城市数据
      // sessionStorage.setItem("val", value);
      //   console.log(value);
      var that = this;
      commonRequest("/api/project/getProvinceProjectAmount", {
        province: that.currentProvincial
      }).then(res => {
        that.allRegions = res;
        that.Lzqgdtsj = [];
        for (let i = 0; i < res.length; i++) {
          if (
            res[i].place != "" &&
            res[i].place != null &&
            res[i].place != "全省" &&
            res[i].place != "[]"
          ) {
            var name = "";
            if (that.currentProvincial == "") {
              name = res[i].place.replace(
                /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
                ""
              );
            } else {
              name = res[i].place;
            }
            that.Lzqgdtsj.push({
              name: name,
              value: res[i].projectAmount
            });
          }
        }
        that.wholeCountry(value);
      });
    },
    // 返回全国
    withdraw() {
      var that = this;
      that.currentProvincial = "";
      that.CurrentLevel = 1;
      that.introduceJs("china");
      that.$emit("province", 0, that.currentProvincial);
    },
    //js引入
    introduceJs(value) {
      var that = this;
      this.getData(value);
      //     setTimeout(()=>{
      //     this.getData(value);
      // },2000)
      // var s = document.createElement("script");
      // s.type = "text/javascript";
      // s.src = "/static/js/" + value + ".js";
      // document.body.appendChild(s);
      // s.onload = s.onreadystatechange = function () {
      //   that.getData(value);
      // };
    },
    //地图生成
    wholeCountry(value) {
      var titles = "全国";
      if (value != "china") {
        titles = value;
      }
      var that = this;
      var optionMap = {
        title: {
          text: titles,
          subtext: "",
          x: "center",
          top: 30
        },
        tooltip: {
          trigger: "item"
        },

        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          left: 0,
          bottom: 10,
          splitList: [
            { start: 20000 },
            { start: 10000, end: 20000 },
            { start: 5000, end: 10000 },
            { start: 2000, end: 5000 },
            { start: 1000, end: 2000 },
            { start: 500, end: 1000 },
            { start: 200, end: 500 },
            { end: 200 }
          ],
          color: [
            "#3c55bb",
            "#0068ce",
            "#0f74d8",
            "#2489ec",
            "#44a2ff",
            "#98ccff",
            "#cee6ff",
            "#ecf6ff"
          ]
        },
        //配置属性
        series: [
          {
            name: "项目数量",
            type: "map",
            mapType: value,
            roam: false,
            zoom: 1.1,
            label: {
              normal: {
                show: true //省份名称
              },
              emphasis: {
                show: false
              }
            },
            data: that.Lzqgdtsj //数据
          }
        ]
      };
      //初始化echarts实例
      var myChart = echarts.init(that.$refs.nationalMap_id);
      //使用制定的配置项和数据显示图表
      myChart.setOption(optionMap);
      if (myChart._$handlers && myChart._$handlers.click) {
        myChart._$handlers.click.length = 0;
      }
      myChart.on("click", function(params) {
        // console.log("185", params);
        if (that.CurrentLevel == 1) {
          for (let i = 0; i < that.allRegions.length; i++) {
            if (
              that.allRegions[i].place != "" &&
              that.allRegions[i].place != null &&
              that.allRegions[i].place != "全省" &&
              that.allRegions[i].place != "[]"
            ) {
              var name = that.allRegions[i].place.replace(
                /省|市|自治区|特别行政区|壮族|回族|维吾尔/g,
                ""
              );
              if (name == params.name) {
                that.currentProvincial = that.allRegions[i].place;
                that.introduceJs(params.name);
                that.CurrentLevel = 2;
                that.$emit("province", 1, that.currentProvincial);
                return;
              }
            }
          }
        }
        if (that.CurrentLevel == 2) {
          that.$emit("province", 2, params.name);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.nationalMap {
  width: 500px;
  height: 500px;
}
.nationalMap_return {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 999;
  p {
    float: left;
    font-size: 18px;
    color: rgb(68, 162, 255);
  }
  img {
    width: 26px;
    float: left;
  }
}
</style>
